<template>
	<div class="madp-channel-code">
		<basic-container>
			<div v-show="isTabShow">
				<el-tabs v-model="activeName">
					<el-tab-pane label="渠道列表" name="first"></el-tab-pane>
					<el-tab-pane v-if="isSecondShow" label="数据详情" name="second"></el-tab-pane>
				</el-tabs>
			</div>
			<div class="madp-code-content">
				<channel-code-home
					v-if="activeName === 'first'"
					@changeTabShow="(e) => (isTabShow = e)"
					@changeSecondShow="
						(e) => {
							isSecondShow = e.isSecondShow;
							selectedGroup = e.id;
						}
					"
					:oldSelectedGroup="selectedGroup"
				></channel-code-home>
				<code-data-detail v-if="activeName === 'second'" @changeTabShow="(e) => (isTabShow = e)" :selectedGroup="selectedGroup"></code-data-detail>
			</div>
		</basic-container>
	</div>
</template>

<script>
import channelCodeHome from './channel-code-home.vue';
import codeDataDetail from './code-data-detail.vue';
export default {
	components: { channelCodeHome, codeDataDetail },
	data() {
		return {
			activeName: 'first',
			isTabShow: true,
			isSecondShow: true,
			selectedGroup: 0,
		};
	},
};
</script>

<style lang="scss" scoped>
.madp-code-content {
	overflow: auto;
}
</style>
